<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="../libs/css/animate.css">
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        tr td{
            border:1px solid #ddd;  
        }

        .myimg{
            width:120px;
            height:120px;
            border-radius: 50%;
            /* transition: all 1s; */
            display: block;
            margin:10px;
        }
        .move:hover {
            transform: translateX(300px);
        }

        @keyframes moveleft{
            from{transform: translateX(0);}
            to{transform: translateX(300px);}
        }
        .mleft{
            animation: moveleft 1s both;
        }

        .v-enter{
            opacity: 0;
            transform: translateX(300px);
        }
        .v-enter-to{
            opacity: 1;
            transform: translateX(0px);
        }
        .v-enter-active{
            transition: all 1s;
        }
        .v-leave{
            opacity: 1;
            transform: translateX(0px);
        }
        .v-leave-to{
            opacity: 0;
            transform: translateX(300px);
        }
        .v-leave-active{
            transition: all 1s;
        }   

        @keyframes enter{
            0%{transform: translate(0,-200px);opacity: 0;}
            100%{transform: translate(0,0);opacity: 1;}
        }

        @keyframes leave{
            0%{transform: translate(0,0);opacity: 1;}
            100%{transform: translate(0,200px);opacity: 0;}
        }
        .fade-enter-active{
            animation: enter 1s both;
        }
        .fade-leave-active{
            animation: leave 1s both;
        }

        .slide-enter-active{
            animation: zoomInDown  1s;
        }
        .slide-leave-active{
            animation: zoomOutDown  1s;
        }

        .move-enter-active{
            animation: lightSpeedInRight 1s;
        }
        .move-leave-active{
            animation: lightSpeedOutRight  1s;
        }
        

        .movein{
            animation: bounceInDown 1s ;
        }
        
        .animated{
            animation-duration: 2s;
        }

        .custom-enter-active{
            animation: bounceInRight 1s;
        }
        .custom-leave-active{
            animation: bounceOutRight 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
            <img src="http://47.104.209.44/base/img/1.jpg" class="myimg move" alt="">
            <img src="http://47.104.209.44/base/img/2.jpg" class="myimg mleft" alt="">
        <div >
            <transition name="v">    
                <img v-if="show" class="myimg" src="http://47.104.209.44/base/img/3.jpg" alt="">
            </transition>
            <button @click="show=!show">点击切换1</button>
        </div>
        <div >
            <transition name="fade">    
                <img v-if="show1" class="myimg" src="http://47.104.209.44/base/img/4.jpg" alt="">
            </transition>
            <button @click="show1=!show1">点击切换2</button>
        </div>

        <div >
            <transition name="slide">    
                <img v-if="show2" class="myimg " src="http://47.104.209.44/base/img/5.jpg" alt="">
            </transition>
            <button @click="show2=!show2">点击切换3</button>
        </div>
        <div >
            <transition name="move">    
                <img v-if="show3" class="myimg " src="http://47.104.209.44/base/img/1.jpg" alt="">
            </transition>
            <button @click="show3=!show3">点击切换3</button>
        </div>

        <div >
            <!-- enter-active-class="animated bounceInRight"
            leave-active-class="animated bounceOutRight" -->
            <transition 
                
                enter-active-class="custom-enter-active"
                leave-active-class="custom-leave-active"
                appear
                appear-active-class="movein"
            
            >    
                <img v-if="show4" class="myimg " src="http://47.104.209.44/base/img/2.jpg" alt="">
            </transition>
            <button @click="show4=!show4">点击切换4</button>
        </div>

    </div>
    <script>



        const vm = new Vue({
            data:{
                msg:"Vue transition 实现过渡效果  ",
                show:true,
                show1:true,
                show2:true,
                show3:true,
                show4:true
            },  
            computed:{

            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }
        }).$mount("#app")
    </script>
       <!-- 
        route  页面切换    进入和离开的动画  

        Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
        v-if
        v-show
        组件切换  (动态组件切换  子组件切换)


        过渡  (0-1)  
        在进入/离开的过渡中，会有 6 个 class 切换
        v-enter  进入之前    开始帧 过渡
        v-enter-active 正在进入   animation
        v-enter-to  进入完成   结束帧

        v-leave  离开之前
        v-leave-active  正在离开
        v-leave-to   离开完成

        v-   transition 没有name 默认 v-
        transition 添加 name = fade  v 替换成 fade 

        初始化渲染 过渡 
        appear
        appear-active-class  动画 

        v-if / v-show 
        
     -->

</body>
</html>